import { ProFormCheckbox } from "@ant-design/pro-components";
import { useState } from "react";
import "./index.less";
import { text } from "./utils";
import TermsConditionsModal from "@/components/terms-and-conditions";

interface SubmissionCheckboxProps {
  name?: string;
  form?: any;
}

const SubmissionCheckbox: React.FC<SubmissionCheckboxProps> = ({
  name,
  form,
}) => {
  const htmlContent = { __html: text };

  const [modal2Open, setModal2Open] = useState(false);

  const handleCheckboxChange = (e: any) => {
    if (e.target.checked) {
      setModal2Open(true);
    } else {
      form.setFieldValue(`${name}.c`, false); // 取消选择时设置为 false
    }
  };

  const handleCancelInModal = () => {
    form.setFieldValue(`${name}.c`, false); // 取消时确保状态为 false
    setModal2Open(false);
  };

  const handleAgreeInModal = () => {
    form.setFieldValue(`${name}.c`, true); // 同意时设置为 true
    setModal2Open(false);
  };

  return (
    <>
      <ProFormCheckbox
        rules={[
          {
            required: true,
            message: "This field is required",
          },
        ]}
        name={[`${name}`, "personInfo"]}
      >
        Acknowledge <span className="highlight-text">personal information</span>{" "}
        are only for data usage.
      </ProFormCheckbox>
      <ProFormCheckbox
        rules={[
          {
            required: true,
            message: "This field is required",
          },
        ]}
        name={[`${name}`, "lrnUpdate"]}
      >
        Acknowledge{" "}
        <span className="highlight-text">
          License Plate Number Registration
        </span>{" "}
        can be updated once only otherwise extra cost is required.
      </ProFormCheckbox>
      <ProFormCheckbox
        rules={[
          {
            required: true,
            message: "This field is required",
          },
        ]}
        name={[`${name}`, "tAndC"]}
        fieldProps={{
          onChange: handleCheckboxChange,
        }}
      >
        Please read and agree to our{" "}
        <span className="highlight-text">Terms and Conditions</span> before
        submission.
      </ProFormCheckbox>

      <ProFormCheckbox name={[`${name}`, "promoMail"]}>
        Receive our{" "}
        <span className="highlight-text">promotional marketing</span> email.
      </ProFormCheckbox>

      <TermsConditionsModal
        title="Terms and Conditions"
        text={htmlContent}
        onOk={handleAgreeInModal}
        onCancel={handleCancelInModal}
        isModalOpen={modal2Open}
        btnLeftText="Cancel"
        btnRightText="Agree"
      />
    </>
  );
};

export default SubmissionCheckbox;
